<script setup lang="ts">
 import { ref } from 'vue'
 import AcountCode from './component/AcountCode.vue';
 import QRcodelogin from './component/QrcodeLogin.vue';
 import AcountPhone from './component/AcountPhone.vue';
 const activeTab = ref<number[]>([1,2,3]);

</script>

<template>
  <el-row class="login-page">
    <el-col :span="16" class="co-login-page" :offset="4">
      <!-- 左侧展示页 -->
      <el-col :span="14" class="left" >
        <div class="upImg"></div>
      </el-col> 
      <!-- 右侧登录页 -->
      <el-col :span="10" class="right">
        <!-- 密码登录 -->
        <AcountPhone v-if="activeTab.includes(1)">
        </AcountPhone>
        <!-- 二维码登录 -->
        <QRcodelogin v-else-if="activeTab.includes(2)">
        </QRcodelogin>
        <!-- 验证码登录 -->
        <AcountCode v-else>
        </AcountCode>
         
        <!-- 切换按钮 -->
           <div class="bos">
              <el-form-item class="slide">
                <el-button @click="activeTab = [1]">手机号登录</el-button>
                <el-button @click="activeTab = [2]">扫码登录</el-button>
                <el-button @click="activeTab = [3]">验证码登录</el-button>
              </el-form-item>
            </div>
      </el-col>

    </el-col>
  </el-row>
</template>

<style lang = scss scoped>
  .login-page{
     height: 100vh;
     background-repeat: no-repeat;
     background-position:center;
     background-size: cover;
     background-image: url("../../assests/homePictures/banner3.jpg");
     .co-login-page{
       display: flex;
       border-radius:20px;
      height: 65%;
      background-color: rgba($color: #F7EFE3, $alpha: 50%);
      align-self: center;
      justify-content: center; 
      .left{
        height:100%;
        background-color: #CAB7B5;
        border-radius:20px 0 0 20px;
        border: 3px solid #5A3E2F;
        .upImg{
          width: 100%;
          height: 100%;
          background-repeat: no-repeat;
          background-image: url("../../assests/photo/newLogo4.png");
          background-position:center;
          background-size: contain;
        }
      }
      .right{
         position: relative;
         height:100%;
         background-color: rgba($color: #BBB, $alpha: 0.2);
         border-radius:0 20px 20px 0;
         border: 3px solid #5A3E2F;
    }
  }
}

  .bos{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 36rem;
    right: 0;
    display: flex;
    justify-content: center;
    z-index:0;
    .slide{
    :deep(.el-button) {
        align-items: center;
        margin-top: 1rem;
        background-color: #5A3E2F;
        color: #F7F2EB;
        font-weight: bold;
        border: none;
        font-size: 0.8rem;
        border-radius: 12px;
        letter-spacing: 1px;
        transition: all 0.3s;
        
        &:hover {
          background-color: #7A5E4F;
          transform: translateY(-2px);
          box-shadow: 0 4px 8px rgba(90, 62, 47, 0.25);
        }
        
        &:active {
          transform: translateY(1px);
        }
      }
  }
}
</style>
